<template>

    <div>
      <template></template>
      <input type="text" v-model="message" />

      {{ message }}
      <br/>
      {{ reverse_message }}

      <br/>

      千米：<input type="text" v-model="kilometers" />
      米：<input type="text" v-model="meters" />
      <br>
      <div v-show="flag">
        看见
      </div>
      <br>
      <div v-if="num==9">
        num ==9



      </div>
      <div v-else-if="num==10">
        num == 10

      </div>
      <div v-else>
        num != 9 and num != 10
      </div>
      <br>
      <ul>
        <li v-for="(item,index) in tltst" :class="{on:index%2==0,off:index%2!=0}">
          {{ item.text }}

        </li>
      </ul>
      <br>

      <table>
        <tr v-for="(item,index) in datalist">
          <td>
            {{ item.name }}
          </td>
          <td>
            <button @click="minus(index)">-</button>

            <input type="text" v-model="item.num"/>

            <button @click="add(index)">+</button>
          </td>
        </tr>

      </table>

      <button @click="add_cart('宝马')">添加宝马</button>
      <button @click="add_cart('电脑')">添加电脑</button>

      <br>
      <!--{{ totalCount }}-->

    </div>
</template>

<script>

  // 导入子组件
  import testheader from './testheader'

    export default {
        data(){
          return{
            message:'hello world',
            kilometers:0,
            meters:0,
            flag:true,
            num :8,
            tltst:[{text:'汽车'},{text:'面包'},{'text':'鲜花'}],
            datalist:[]

          }
        },
      //定义组件标签
      components:{

          'testheader':testheader

      },


      //自定义方法
      methods:{
          //汇总商品数量
        totalCount:function(){

          //默认数量
          let total = 0;
          //遍历
          for(let i=0,l=this.datalist.length;i<1;i++){

            total += this.datalist[i].num;
          }

          return total;


        },



          //减少商品数量
        minus:function(index){
          if(this.datalist[index].num>0){

            this.datalist[index].num -- ;
          }

        },
        //增加商品数量
         add:function(index){


            this.datalist[index].num ++ ;

        },


          //添加购物车
        add_cart:function (name) {

          //声明购物车变量
            let cartlist = this.datalist;

            //声明坐标
            let findgood = 0;

            //遍历购物车列表
            for(let i=0,l=cartlist.length;i<l;i++){

              //判断逻辑
              if(name == cartlist[i]['name']){
                cartlist[i]['num']++;
                findgood = 1;
                break;

              }
            }
            if(findgood==0){

              cartlist.push({name:name,num:1});

            }

            //重新赋值
            this.datalist = cartlist;



        }
      },





      //钩子方法
      mounted:function(){
         console.log('这是初始化方法')
      },



      //监听属性
      watch:{
          kilometers:function (val) {
            this.kliometers = val;
            this.meters = val * 1000;
          },
        meters:function (val) {
            this.kilometers = val/1000;
            this.meters = val

        }
      },


      //计算属性
      computed:{
          reverse_message:function () {

            //反转逻辑
            return this.message

          }
      }
    }
</script>

<style scoped>
  .on{background-color: red}
  .off{background-color: black}

</style>
